<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    destroyOnClose
    :title="title"
    :width="800"
    :showOkBtn="false"
    :showCancelBtn="false"
  >
    <!--取消默认的确定和取消按钮  :showOkBtn="false" :showCancelBtn="false" -->
  <BasicForm @register="registerForm" name="HuibaojilubiaoForm" />

  <!-- 自定义底部按钮 -->
  <template #footer>
    <div class="modal-footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleSave('暂存')">暂存</a-button>
      <a-button type="primary" danger @click="handleSave('提交')">提交</a-button>
    </div>
  </template>
  </BasicModal>
</template>

<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import {BasicModal, useModalInner} from '/@/components/Modal';
import {BasicForm, useForm} from '/@/components/Form/index';
import {formSchema} from '../Huibaojilubiao.data';
import {zancun} from '../Huibaojilubiao.api';  // 引入暂存接口
import { useMessage } from '/@/hooks/web/useMessage';
import { getDateByPicker } from '/@/utils';

const { createMessage } = useMessage();
const emit = defineEmits(['register','success']);
const isUpdate = ref(true);
const isDetail = ref(false);

// 表单配置
const [registerForm, { setProps, resetFields, setFieldsValue, validate, scrollToField }] = useForm({
  labelWidth: 150,
  schemas: formSchema,
  showActionButtonGroup: false,
  baseColProps: {span: 24}
});

// 模态框配置
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  await resetFields();
  setModalProps({confirmLoading: false});
  isUpdate.value = !!data?.isUpdate;
  isDetail.value = !!data?.showFooter;

  if (unref(isUpdate)) {
    await setFieldsValue({...data.record});
  }
  setProps({ disabled: !data?.showFooter })
});

const fieldPickers = reactive({});
const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));

// 取消按钮
const handleCancel = () => {
  closeModal();
};

// 暂存和提交处理
async function handleSave(type: '暂存' | '提交') {
  try {
    let values = await validate();
    changeDateValue(values);

    // 构造提交参数，包含操作类型
    const params = {
      ...values,
      tijiaozhuangtai: type,  // 传递操作类型给后端
      zhuangtai: "待汇报"     // 状态固定为待汇报
    };

    setModalProps({confirmLoading: true});
    // 调用后端汇报接口
    await zancun(params, () => {
      createMessage.success(`${type}成功`);
      closeModal();
      emit('success');
    });
  } catch ({ errorFields }) {
    if (errorFields && errorFields[0]) {
      scrollToField(errorFields[0].name, { behavior: 'smooth', block: 'center' });
    }
    return Promise.reject(errorFields);
  } finally {
    setModalProps({confirmLoading: false});
  }
}

const changeDateValue = (formData) => {
  if (formData && fieldPickers) {
    for (let key in fieldPickers) {
      if (formData[key]) {
        formData[key] = getDateByPicker(formData[key], fieldPickers[key]);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.modal-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid #e8e8e8;
}

:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}
</style>
